<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				background-color: white;
			}
			.clock{
				width: 300px;
				height: 300px;
				border: 10px solid dodgerblue;
				border-radius: 50%;
				position: relative;
				margin: 100px auto;
			}
			.line{
				width: 8px;
				height: 300px;
				background-color: tomato;
				position: absolute;
				top: 0;left: 50%;
				transform: translate(-50%,0);
			}
			.line2{
				transform:translate(-50%,0) rotate(30deg);
			}
			.line3{
				transform:translate(-50%,0) rotate(60deg);
			}
			.line4{
				transform:translate(-50%,0) rotate(90deg);
			}
			.line5{
				transform:translate(-50%,0) rotate(120deg);
			}
			.line6{
				transform:translate(-50%,0) rotate(150deg);
			}
			.outer{
				width: 260px;
				height: 260px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 50%;left: 50%;
				transform: translate(-50%,-50%);
			}
			.hour,.mintue,.second{
				position: absolute;
				top: 13%;left: 50%;
				transform: translate(-50%,-100%);
				transform-origin: center bottom;
			}
			.hour{
				width: 6px;
				height: 70px;
				background-color: gold;
				margin: 40px 0 0 0;
				
			}
			.mintue{
				width: 5px;
				height: 90px;
				background-color: cyan;
				margin: 20px 20px 0 0;
			}
			.second{
				width: 4px;
				height: 110px;
				background-color: pink;
			}
			.cent{
				width: 20px;
				height: 20px;
				background: green;
				border-radius: 50%;
				position: absolute;
				top: 50%;left: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="line line1"></div>
			<div class="line line2"></div>
			<div class="line line3"></div>
			<div class="line line4"></div>
			<div class="line line5"></div>
			<div class="line line6"></div>
			<div class="outer"></div>
			<div class="hour"></div>
			<div class="mintue"></div>
			<div class="second"></div>
			<div class="cent"></div>
		</div>
	</body>
	<script src="jq/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
	    function fn(){
	    var myDate=new Date;
	    var h=myDate.getHours();
	    var m=myDate.getMinutes();
	    var s=myDate.getSeconds();
	    $(".hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"});
	    $(".mintue").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"});
	    $(".second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"});
	    }
	    fn();
	    setInterval(fn,1000);
	</script>
</html>
